
	{% extends "base.html" %}
	{% block js%} 
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      
      function drawChart() {
       

        var data3 = new google.visualization.DataTable();
        data3.addColumn('string','Time');
        data3.addColumn('number','{{name}}');
        data3.addRows({{result|safe}});

        var options = {
          title: 'Term Frequency of {{name}}',
          curveType: "function"
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data3, options);
        trendpage();
      }
      
    </script>
	{% endblock%}
	{% block title %} Welcome to Text Minging Demo Site {% endblock %}
	{% block head %} Term Frequency {% endblock %}
		
	{% block content %}
	<br>
	<form class="form-search" method="get" target="_self" action='/trend' >
		<div class="input-append">
			<input type="text" class="span2 search-query" name="query">
			<button type="submit" class="btn btn-primary">Term Freq</button>
		</div>
	</form>
	 <div id="chart_div" style="width: 1000px; height: 500px;"></div>
	{% endblock %}

